@<template>
  <div class="Singer-box">
     <Load v-if="loadershow"></Load>
    <div>
      <!-- 语种 -->
      <singerClass :classData="titleOne" name="语种" @sonData='getArea'></singerClass>
      <!-- 分类 -->
      <singerClass
        style="margin: 16px 0"
        :classData="titleTwo"
        name="分类"
        @sonData='getClass'
      ></singerClass>
      <!-- 筛选 -->
      <singerClass :classData="titleThree" name="筛选" @sonData='getShaix'></singerClass>
    </div>
    <!-- list -->
    <div class="list flex-three">
      <!-- v-for -->
      <div class="list-item" v-for="(item, index) in listData" :key="index">
        <img :src="item.picUrl" alt="" />
        <div class="flex">
          <div class="singname">{{ item.name }}</div>
          <div class="singicon"><i class="el-icon-s-custom"></i></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Load from'@/components/Load'
import { getListdata } from "@/network/singer";
import singerClass from "@/components/singerClass";
export default {
  data() {
    return {
      loadershow:false,
      titleOne: ["华语", "欧美", "日本", "韩国", "其他"],
      titleTwo: ["全部", "男歌手", "女歌手", "乐队组合"],
      titleThree: [
        "热门",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "#",
      ],
      listData: [],
      area: "16",
      type: "-1",
      initial: "-1",
    };
  },
  components: {
    singerClass,
    Load
  },
  created() {
    //获取网络数据  页面一进来获取网络接口
    this.getListdataM(this.type, this.area, this.initial);
  },
  methods: {
    getListdataM(type, area, initial) {
      this.loadershow = true
      getListdata("/artist/list", {
        type: type,
        area: area,
        initial: initial,
        limit: 30,
      }).then((res) => {
        // console.log(res);
        this.loadershow = false
        this.listData = res.artists;
      });
    },
    //子组件传过来的数据  语种
    getArea(item){
      // console.log(item)
      //根据后台接口
      switch(item){
          case '华语':
          this.area = 7
          break
          case '欧美':
          this.area = 96
          break
          case '韩国':
          this.area = 16
          break
          case '日本':
          this.area = 8
          break
          default:
            this.area = 0
      }
      this.getListdataM(this.type, this.area, this.initial)
    },
    getClass(item){
         switch(item){
          case '男歌手':
          this.type = 1
          break
          case '女':
          this.type = 2
          break
          case '乐队组合':
          this.type = 3
          break
          default:
            this.type = -1
      }
      this.getListdataM(this.type, this.area, this.initial)
    },
    getShaix(item){
       switch(item){
          case '全部':
          this.initial = 0
          break
          case '热门':
          this.initial = -1
          break
          case '#':
          this.initial = 0
          break
          default:
            this.initial = item.toLowerCase() //toLowerCase()小写的方法
      }
      this.getListdataM(this.type, this.area, this.initial)
    }
  },
};
</script>

<style scoped lang='less'>
.Singer-box {
  .list {
    margin-top: 20px;
    .list-item {
      height: 201px;
      width: 261px;
      margin-bottom: 16px;
      img {
        width: 100%;
        height: 176px;
      }
      .singname{
        color: red;
        font-style:oblique;
        font-family: 宋体;
      }
      .singicon{
        color: red;
      }
    }
  }
}
</style>